<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport" content="width=320, user-scalable=no, target-densitydpi=device-dpi"> 
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<link rel="stylesheet" type="text/css" href="css/style8.css">
</head>
<body>
	<div id="warp" onclick="stop(this)">
		<div id="area0" class="area">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
	</div>
</body>
	<script type="text/javascript">

	alert('注意地基🏠 准备开始！🚀  游戏规则：一层一层的落起砖块，注意⚠️多余的砖块会被干掉🔫');
		
	var warp = document.getElementById('warp');	
	var area0 = document.getElementById('area0');

	// 初始容器宽度和高度
	var warp_width = warp.clientWidth;
	var warp_height = warp.clientHeight;
	var area_height = area0.offsetHeight;

	// 为毛0px不算初始值
	area0.style.left = '0px';
	area0.style.bottom = '0px';

	
	// 关卡速度
	var speed = 300;
	// 关卡初始速度保留值
	var temp_speed = speed;
	// 关卡每次提升速度
	var addSpeed = 50;

	// 定义area位置计数器
	var num = 1;

	// 计数器
	var index = 1;

	// 定时器
	var timer;

	setIntervalAnimation(area0);

	// 动起来
	function setIntervalAnimation(obj){
		var i = 0;
		var bool = true;
		var max = max_area(obj.offsetWidth);
		timer = setInterval(function(){
				if (bool) {
					i += 20;
					if (i > max - 20) {
						bool = false;
					}
				}else{
					i -= 20;
					if (i < 20) {
						bool = true;
					}
				}
				obj.style.left = i + 'px';
			},speed);
	}

	// 计算容器运动范围
	function max_area(obj_width){
		var max_left = warp_width - obj_width;
		return max_left;
	}

	// 停下来 
	function stop(who){
		var nextArea;
		clearInterval(timer);
		console.log(index);
		if (index == 1) {
			num = createNext(index,9);
			index++;
		}else{
			var lastArea = document.getElementById('area' + (num - 1));
			var nextArea = document.getElementById('area' + num);
			var areaCount = rule(lastArea,nextArea); 
			if (areaCount > 0) {
				index++;
				num = createNext(index - 1,areaCount); 
			}else{
				alert('😞失败了。。。没关系！再接再厉！😊 你一共通过了' + ((temp_speed - speed) / addSpeed) + '关！');
                alert('注意地基🏠 准备开始！🚀  游戏规则：一层一层的落起砖块，注意⚠️多余的砖块会被干掉🔫');
                speed = temp_speed;
				reInit();
			}
		}
	}

	// 创建下一层
	function createNext(index,count){
		var area = document.createElement('div');
		area.className = 'area';
		area.id = 'area' + index;
		area.style.width = 20 * count + 'px';
		area.style.bottom = index * parseInt(area_height) + 'px';
		// 不给初始值不行是什么鬼。。。css样式吃什么去了
		area.style.left = '0px';
		var bottom_offset = parseInt(area.style.bottom);
		if (bottom_offset  < warp_height) {
			warp.appendChild(area);
			var areaIndex = document.getElementById('area' + index);
			for (var i = 0; i < count; i++) {
				var tempDiv = document.createElement('div');
				areaIndex.appendChild(tempDiv);
			}
			setIntervalAnimation(area);	
		}else{
			speed -= addSpeed;
			if (speed < addSpeed) {
				speed = temp_speed;
				alert('🌹恭喜你！全部通关！🌹');
			}else{
				alert('恭喜你！通当前关卡😊 下一关准备开始喽！🚀');
			}
			reInit();
		}
		return index;
	}

	function rule(lastArea,nextArea){
		var result = 0;
		var last_left = parseInt(lastArea.style.left);
		var next_width = parseInt(nextArea.style.width);
		var next_left = parseInt(nextArea.style.left);
		if (next_left >= last_left) {
			result = next_width - next_left + last_left;
		}else{
			result = next_width - last_left + next_left;
			nextArea.style.left = last_left + 'px';
		}
		nextArea.style.width = result + 'px';
		return result / 20;
	}

	// 初始化
	function reInit(){
		warp.innerHTML = '<div id="area0" class="area"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>'
		area0 = document.getElementById('area0');
		area0.style.left = '0px';
		area0.style.bottom = '0px';
		index = 1;
		num = 1;
		setIntervalAnimation(area0);
	}

	</script>
</html>